.checkbox input[type="checkbox"] {
    display: none;
}

.checkbox label {
    display: inline-block;
    position:relative;
}

.checkbox label::before,
.checkbox label::after {
    content: "";

    /*Needed for the line-height to take effect*/
    display: inline-block;
}

/*Outer box of the fake checkbox*/
.checkbox label::before {
    height: 16px;
    width: 16px;
    border: 1px solid #999;
    margin-top: 8px;
}

/*Checkmark of the fake checkbox*/
.checkbox label::after {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(45deg);
    height: 10px;
    width: 4px;
    position: absolute;
    left: 7px;
    top: 10px;
}

/*Hide the checkmark by default*/
.checkbox input[type="checkbox"] + label::after {
    content: none;
}

/*Unhide on the checked state*/
.checkbox input[type="checkbox"]:checked + label::after {
    content: "";
}
.checkbox input[type="checkbox"]:checked + label::before {
    border-color: #53961a;
    background: #53961a;
}
/*Adding focus styles on the outer-box of the fake checkbox*/
.checkbox input[type="checkbox"]:focus + label::before {
    outline: 0;
}
.checkbox input[type="checkbox"]:disabled + label:before {
    background: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
}
